<template>
  <div class="left-chart-2">
    <template v-if="config.data">
      <dv-scroll-board class="equip-board" :config="config" />
    </template>
    <div v-else class="no-data">暂无数据</div>
  </div>
</template>

<script>
import { getLineElecUseInfo } from "@/api/dashboard/blowIrriagtionSpinLine";
export default {
  name: "LeftChart3",
  props: {
    lineItem: {
      type: Object,
      default: null,
    },
    refreshKey: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      config: {},
      scrollKey: 1,
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      if (!this.lineItem) {
        return;
      }
      const param = {
        lineId: this.lineItem.value,
      };
      getLineElecUseInfo(param).then((res) => {
        if (res?.data) {
          const { equipIndexValueVos } = res.data;
          // 今日各机台耗电情况
          if (equipIndexValueVos?.length) {
            // 排序
            let _equipIndexValueVos = equipIndexValueVos.sort((a, b) => {
              return a.indexValue <= b.indexValue ? 1 : -1;
            });

            // 最大值
            const maxValue = _equipIndexValueVos[0].indexValue || 1;
            let data = [];
            const rowSize = 2;
            const rowNum = Math.ceil(_equipIndexValueVos.length / rowSize);
            for (let i = 0; i < rowNum; i++) {
              let row = _equipIndexValueVos.slice(
                i * rowSize,
                (i + 1) * rowSize
              );
              const dataStrs = row.map(
                (ele, index) => `
                    <div class="equip-item">
                      <div class="top">
                        <span class="label">
                          <span class="sort">No.${
                            i * rowSize + index + 1
                          }</span>
                          <span class="name">${ele.indexConfigName}</span>
                        </span>
                        <span class="value">${this.toFix(ele.indexValue || 0, 2)}${
                  ele.indexValueUnit
                }</span>
                      </div>
                      <div class="bottom">
                        <div class="bottom-inner" style="width:${Math.round(
                          ((ele.indexValue || 0) / maxValue) * 100
                        )}%;"></div>
                      </div>
                    </div>
                  `
              );
              data.push(dataStrs);
            }
            this.config = {
              data: data,
              oddRowBGC: "none",
              evenRowBGC: "none",
              rowNum: 4,
              align: ["left"],
            };
            // this.scrollKey++;
          }
        }
      });
    },
  },
  watch: {
    refreshKey: {
      handler() {
        this.getData();
      },
    },
  },
};
</script>

<style lang="less" scoped>
.left-chart-2 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .equip-board {
    margin-top: 40px;
    flex: 1;
    ::v-deep {
      .equip-item {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        .top {
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 10px;
          line-height: 1;
          .sort {
            margin-right: 5px;
            color: #1370fb;
          }
        }
        .bottom {
          width: 100%;
          padding-bottom: 2px;
          border-bottom: 2px solid rgba(19, 112, 251, 0.5);
          &-inner {
            height: 6px;
            border-radius: 1px;
            background-color: #1370fb;
          }
        }
      }
    }
  }
}

.no-data {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  opacity: 0.6;
}
</style>
